Tutorial: Using wwwART to create "ribbeting"graphics for your Web pages

This tutorial covers the most commonly used features of wwwART for day-to-day Web page creation tasks, and gives you tips on using wwwART to make "toadally awesome"Web graphics; it doesn't go into detail on every feature of wwwART. Read the Reference section of this manual, and monitor the "Tips Library" area of the MicroFrontier Web site for additional ideas for making the most of wwwART and how to make your web page's graphics grow better by leaps and bounds!

When you first run wwwART you are presented with a blank document, and several floating windows which we call palettes. If you ever close one of these 4 palettes you can open it again by picking the palette's name from the Tools menu in the menu bar. These palettes and the tools and controls available on them are used for drawing and retouching images you have opened or scanned, and for drawing new images. There are also selection tools for specifying areas of the image to alter, copy to the clipboard, paste into, or drag-and-drop into other documents such as Web Page creation programs.

Let's briefly go over the palettes and window controls provided by wwwART. Here's what you'll see the first time you run wwwART:

The Tools Palette contains all the image selection and editing tools such as brushes and shape-drawing tools.


The various buttons on the Tools Palette represent tools you can use to edit the image or select portions to be acted upon, cut, copied, or moved. Click on the various tool buttons to activate and use them. The tool currently in use will appear to be darker in color and "depressed"; in the picture of the Tools Palette on this page, the Brush tool is being used.

The middle section of the Tools Palette, below the tool buttons, changes based on the type of tool you have selected. This area contains controls that let you adjust the way the tool you are using works. Here are some examples of the controls you might see at the bottom of the Tools palette:

Many of these controls are pop-up menus (indicated by a downward pointing arrow like this: somewhere in the control) ; click and hold the mouse button when pointing at these to pop up the menu or control and make a selection.

Below the controls section is the "tear-off" colors palette. Click and drag on the "Pull" area of the Tools palette to tear the Color section of the Tools palette off and make a separate Colors palette out of it, with expanded capabilities (see below).

Initially, the Colors Palette is automatically torn off for you, and placed near the bottom of the screen. Click the Colors palette's close box to reattach it to the Tools palette.

For details on each tool and it's controls, read through Chapter 2, The Tools Palette .

The Background, Frame and Fill boxes at the left side of the Colors Palette (or bottom of the Tools palette, if not torn off) show your current color or pattern settings and allow you to change them. Click on the Background, Frame, or Fill box and then select a color or pattern using the right side of the Colors Palette.

The Background box is used to select the background color of the image; this is the color that will fill an area when you "cut" an area out of the existing image, or when you erase an area using the erase tool (note: it doesn't necessarily have to be white!)

IMPORTANT NOTE: The Background box is used to specify the color to be treated as the transparent background color when saving a GIF file with the Make background color transparent feature turned on, which allows you to have the "background"of the image not be visible when shown on a Web page.

The Frame box is used to select the color or pattern used for the frame of shapes drawn by the Shape tool and by the Frame command. It's also used as the shadow color by the Drop Shadow command.

The Fill box (shown highlighted with a dashed line) is used to select the color used to fill the inside of shapes drawn with the shape tool. It's also the color used when drawing with the Brush, Pencil, Line, Paint Bucket, Text or Air Brush tools.

For further details on this palette, see Chapter 3, The Colors Palette.

The Mouse Tracking Palette shows you information about the location of the mouse cursor. If you are using the EyeDropper tool, the "RGB" area of Mouse Tracking palette will show you the Red-Green-Blue values of any pixel or color you click on. You can also use it to draw shapes or lines of a certain size or angle or to measure areas to be cut out using the selection tools.

The two pop-up menus in the Mouse Tracking palette let you choose the units used to display the information.

The RGB values can be displayed as decimal, percentage or hexadecimal. Using the hexadecimal setting can be handy when trying to match text or background colors in your Web page with colors in your image -- RGB colors for the text or background in HTML documents are given in hexadecimal.

For measurements, you can choose pixels, inches, centimeters, picas, and points. Pixels are probably the most useful measurement units for Web page creation.

 For details on this palette, see Chapter 11, The Tools menu.

The Opacity palette lets you set the opacity of the paint used when you draw with the drawing tools or paste in an image. This is normally set to 100% so that images you draw or paste totally replace what you draw or paste over. However, if you wish part of the background to "show through", you can adjust the Opacity slider so that the paint or pasted image is partially transparent. This is good for special effects, "watermarks", etc.

This palette lets you define areas on your image that, when clicked, will take you to particular Web pages or Web sites.

NOTE: Your Web server and / or Web browser must support client- or server- side image maps for this feature to work on Web sites you create. Contact your Internet Service Provider or Webmaster for assistance determinine what type of image maps your Web Server and Web browser support (MicroFrontier will probably be able to tell if your Web browser supports client-side image maps or not, but only your Internet Service Provider or Webmaster will be able to tell you what sort of server-side image maps (CERN or NCSA) your Web server supports (if any).

For details on this palette, see Chapter 4, The Web Image Map Palette , and the tutorial on creating Web image maps later in this manual.

There are also some controls and information in each wwwART document window that can be useful to you when creating graphics for Web pages.

At the top of each wwwART window is an "information bar". This tells you (left to right) how big your image is in bytes, K (kilobytes), or M (megabytes) and is useful information when designing Web graphics - the smaller the size, the less transmission time it will take. In the above example, the image is 156 Kilobytes in size, 400x400 pixels in width and height, and is a 256 Indexed Colors format. Note, however, that this is the uncompressed size of the image. Both GIF and JPEG images are compressed when saved, and it's the compressed form that's transmitted over the Internet when you view a Web page. You can see the compressed size of the image and how long it will take to transmit at various baud rates by saving it, then picking Image->Get Info.

The dimensions of the image are initially shown in pixels, but you can change this by clicking and holding down the mouse button on top of the area where the dimensions are displayed (where it says "400x400" above. A pop-up menu will appear to let you select another unit of measure. You can also change the unit of measure using the pop-up menu in the Mouse Tracking Palette. Pixels is the most useful unit for Web page creation, however. You can use the data displayed in the information bar directly in an HTML <IMG> tag to specify the width and height of an image. Doing so allows Web Browsers to layout and start to display the text of a Web page properly before the image has actually been downloaded. For example, using the information shown in the above information bar (400 x 400 pixels) you could create an IMG tag like this:

<IMG SRC="filename.gif" WIDTH=400 HEIGHT=400>

TIP: If you use a text-based Web page editor, the Edit->HTML Tag to Clipboard menu command will place a properly formatted HTML <IMG> tag on the clipboard (with the filename, width and height of your document already filled in), ready to be pasted into the text of your HTML document. Here's what using that menu command would place on the clipboard for a document with the dimensions shown above and a file named "cyberfrog.gif":

<IMG SRC="cyberfrog.gif" WIDTH=400 HEIGHT=400 ALT="cyberfrog.gif"ALIGN=MIDDLE BORDER=0>

You may need to edit the SRC= part to specify the folder (directory) your image is stored in on the Web server. You may also want to edit the text after ALT=. This "Alternate" text is displayed by some browsers while the image is loading, or if you've got image loading turned off to speed up web browsing. Think of it as a "caption" for your image when specifying the text. It's not required, so you can remove the ALT="..." text completely if you wish. You can also adjust or remove the ALIGN= or BORDER= items if you desire.

Finally, the number of colors in the image is shown on the right hand side of the information bar. Generally, GIF images are 256 colors, and JPEG images are Millions (shown as "RGB" instead of "Millions" by wwwART).

At the bottom left corner of wwwART document windows are 3 controls that let you zoom in and out on your image so you can edit it in finer detail, or "see the big picture". These controls are documented in the Reference section of the wwwART manual.

USING wwwART TO EDIT OR CREATE IMAGES

There are many ways to use wwwART to create or edit images for your web pages. You can....

• Create a new image with the File->New command and use the drawing tools to draw it.
  
  
• Use the File->Open command, or double-click a document icon to open an existing image (wwwART can open many file formats, not just GIF and JPEG).
  
  
• Drag-and-drop a picture document (in any format wwwART supports, regardless of what program created it)
  
  

  onto the wwwART program icon:

wwwART supports opening documents that are in the following formats: JPEG, GIF, some TIFF, Macintosh PICT, Photoshop 2.0 and 2.5, Kodak PhotoCD, some PostScript (EPSF), Paint, StartupScreen, Photone Prepress, and Scitex CT. These are the same file formats supported by wwwART's more powerful cousin, Color It!

wwwART support saving documents in GIF and JPEG format, the only two formats in general use on World Wide Web pages.

Additionally, you can drag images from a wwwART window to the desktop to create picture clippings (and vice versa) and to the windows of other programs that support drag and drop, such as many WYSIWYG web page creation programs such as Symantec Visual Page, Adobe PageMill or Claris Home Page, some other graphics programs, or to desk accessories such as the Scrapbook, and Jigsaw Puzzle or control panels such as Desktop Patterns, and Map.

Cut and paste images from other programs into wwwART's window.

Scan a picture using the File->Scan/Import menu item if you have an image scanner. Most Photoshop Acquire plug-ins will work with wwwART (these include scanner and camera plug-ins, as well as file or other device acquire plug-ins).



Once you have opened, drawn or scanned an image, you may need to:

"Crop" it to remove parts you don't want (using the Selection tools and the Image->Crop to Selection command , the Image->Canvas Size menu commands, etc.)

Retouch it (using the drawing tools, "filters" such as Filter->Adjustment->Auto Contrast , flip & rotate the image using Image->Flip-> and Image->Rotate-> menus, etc.)

Apply "special effects" using:

• Other filters on the Filter menu
• Drop shadow and extrude commands (on the Selection Menu)
• Fill, frame, border, smooth edges, and other commands (on the Edit and Selection menus)
• Distortion effects (on the Image->Effects menu)

Preparing an image for a Web Page, Step-by-Step

Here's an example of opening and working with an image. We'll open a JPEG file containing a copy of the wwwART logo, select the frog, give it a drop shadow, and save it as a "transparent" GIF so that the background is invisible when the image is displayed in a web page.

1. Open the "wwwART Tutorial " folder that was installed in the same folder as the wwwART program and locate the "CyberFrog " document.



2. Drag and drop the "CyberFrog" document icon on top of the "wwwART" program icon (or just double-click the "CyberFrog"document.)

The image will open.

3. In the Tools Palette, select the "Magic Wand" tool:

5. With the Magic Wand tool still selected, hold down the [SHIFT] key on the keyboard and click on the other white "background" areas such as those between the frog's arms and the paint brush he's holding, until the entire background is selected.

6. Pick Selection->Invert Selection . This "swaps"the area that's selected for the area that isn't, so now the frog and the "wwwART"text should be selected, instead of the background.

7. Let's put a "drop shadow" behind the image. Pick Selection->Drop Shadow . Drag the gray box behind the black box to indicate where you want the shadow to appear on the actual image. Set the other settings as shown below:

Click OK to make the drop shadow.

8. Pick Selection->Select None or type [Command-D] to get rid of the selection marquee so you can see the image.

You'll notice that around the edges of the frog and logo there are some ugly whitish pixels. This is because the edges of the original image were not "sharp"; in the original image there were some not-quite-white pixels on the edges so that there would be a subtle shading effect between the pure white of the background and the image. This will occur in images from time to time. To get rid of these not-quite-white pixels we're going to undo the drop shadow, then "feather" the edges of the selection inward by one pixel. Do the following:

9. Pick Edit->Undo and then pick Edit->Undo again .

The drop shadow should disappear, and then the image should be re-selected.

10. Pick Selection->Feather . Select "Inward", and give it a width of "1" pixel, then click OK . The selection will be feathered (although visually you won't see any real change).


11. Pick Selection->Drop Shadow again and use the setting from our last attempt (they should still be there - all you need to do is click OK ).

12. Pick Selection->Select None to get rid of the selection marquee so you can see the image.

The whitish border of pixels should no longer be around the edges of the frog, although there are still a few not-quite-white areas between the frog's fingers and in the crook of the frog's legs. If you like, you can use "undo" a couple of times and go back and make sure those areas are selected too, before you "invert selection". This is left as an exercise for the reader, however. (Hint: use the Magic Wand tool while holding down the SHIFT key to click on the "not quite white" pixels. You will probably also need to zoom in using the Magnifier tool or the zoom controls at the bottom left corner of the window to make it easier to select those pixels)

Magnifier tool:

Zoom Controls:

We want to save this image (which is initially a JPEG) as a GIF, since JPEG images can not have "transparent" background pixels. JPEG images must be in Millions, but GIF images must be in 256 colors, so let's convert the image to 256 Indexed Colors.

Saving an image in GIF format is best for images that don't have too many colors, such as charts or cartoon characters or logos. However, photographs, or even images with a lot of shades of particular colors, should generally be saved as JPEG images.

WARNING: JPEG images use a "lossy" compression. Each time you save it, you may lose a little image quality. So don't save and re-save a JPEG image constantly. You should probably save a copy of the original image, under a different name and work on the copy so you'll always have the original to fall back on.

13. Pick Image->Image Type->256 Indexed Colors

A dialog box like this will appear:

This dialog will help you convert a Millions of colors image to a 256 color image. Dithering and various color sets are available to be used in the conversion to help you adjust the image to make it look as good as possible after the conversion, because when you are converting from Millions of Colors (over 16 million, in fact) to 256 colors, you are obviously reducing the number of possible colors your image can contain drastically. Some images are more difficult to convert than others. Such images (usually photographs, or images with many shades of the same color) may have to be saved as a JPEG in millions of colors. You may not be able to make such images "transparent GIFs" without using dithering and perhaps some cleanup work. You'll have to determine which is best for your needs through experimentation and experience.

It's also important to remember that not everyone has a computer that can display millions of colors.....while most Macintoshes support thousands or millions of colors, many (perhaps most) MS-Windows computers have only 256 colors.

If possible, try to use a Color Set setting of "Other: Netscape Optimized"for best compatibility with both Microsoft Windows and Macintosh web browsers. The "Netscape Optimized" color set is designed to contain the 216 (not 256!) colors that both Macintosh and MS-Windows have in common when their monitors are set to 256 colors (the most common setting on both Macs and Windows machines).

If you don't use these, it's possible that the image may appear slightly different on different types of computers, due to the different color sets used on the different computer systems. Converting using the Netscape color set may also cause some of the colors in your image to shift to different values and your image may not look as good, but at least you'll know this now, rather than finding out about it later. You'll have to decide which Dither and Color Set settings are best for your needs through some experimentation. For best results on all computers, use 256 color GIF images, dithered if necessary, and use the Netscape Optimized color set, adjusting your image to compensate for color shifts as necessary.

Some other good choices to try are a Color Set of "Current Document Set"or "Optimized Colors". Experiment a bit with dithering, as well. Use the before and after images to see how your image will look when converted. If you have access to an MS-Windows machine, or some other type of computer that has a Web Browser available on it, be sure to examine your graphics to see if they look good on all platforms.

The Optimized color setting has a pop-up menu that will let you see how your image will look at various color depths below 8 bit (256 color).

Once you've decided on Dither Style and Color Set conversion settings, click OK to convert the image to 256 IndexedColors.

Now that we've converted the image to 256 colors, we can save it as a GIF image and make the background transparent.

14. Select the EyeDropper tool :

15. Click on the Background box in the Colors palette so that it's highlighted:

Before:



After (highlighted):

16. Point in the image and click with the EyeDropper somewhere on the white background. This will cause the EyeDropper tool to "pick up" the white color you clicked on and make it the document's "background color". This color will be marked as the "transparent pixel" color when you save a GIF with the "Make Background transparent" option turned on.

17. Pick File->Save as...

18. Type "cyberfrog.gif " as the file name (you should always save GIF images with a ".gif" at the end of the name. It's also best to keep the name all lowercase letters and numbers and use no spaces or other punctuation except for the dash (-) or underscore (_) characters. This makes certain that the file name will be acceptable for non-Macintosh web servers.

19. Click the "Options" button.

20. Select Macintosh GIF and put a check mark in the Make Background transparent checkbox (initially it will not be checked, as shown above).

While we're here, let's discuss the other GIF options:

The two other File Type Signature settings (Binary and Text ) are useful if you are saving the GIF image directly over a network to the hard disk of the web server and the web server is NOT a Macintosh. This makes sure that the file is in the proper format for being saved on a non-Macintosh web server.

The Interlaced GIF option is useful with larger images; it will cause web browsers that support Interlaced GIF images to draw the image in "bands"that start out with a "coarse" outline of the image and the bands get successively "finer", revealing more and more detail. This is useful because it lets the person browsing your web page get an idea what the image is about before it's fully downloaded. If they decide they not interested in the image, based on the coarser views of it, they can move to another web page before it's finished downloading the image.

The Minimize Color Table option, if checked, will examine the colors used by the image and save the image with a color table as small as possible and with a bit depth less than 8 bits (256 colors) if possible. This can greatly reduce the size of an image. We normally suggest you turn this on only when you are done editing the image and are saving it for the last time, as it will cause any colors in the document's color table to be reduced to just those colors actually in the image (you can see a document's current color set in the Colors Palette by selecting the Grid palette and picking "Document Color Set" from the pop-up menu above the grid.) If you're still editing an image, loss of the other color possibilities can make further editing more difficult. You may want to save an "original"copy of the GIF without turning on the "Minimize Color Table"option before saving it with minimize on. That way you have something to fall back on if you decide you need to edit it again later.

NOTE: You can change which of these checkboxes are turned on by default by using the wwwART Preferences dialog box (Edit->Preferences).

Also in the Preferences dialog box, you can activate a checkbox that will cause the thumbnail icons and preview image and other information stored in the "resource fork" of an image to not be saved. While the information in the resource fork is not transmitted when an image is sent from your Web server to a Web Browser, it makes the image file seem larger than it actually is.


21. Click OK, then click the Save button to save the image as "cyberfrog.gif". The image will be saved in GIF format. If this were an image you were actually going to use on your web page, be sure to save it where you normally keep such images (most web sites seem to have an "images"folder in the same folder as their HTML files where images used on the site are stored, but this is not a requirement).

Several of the settings we just talked about are oriented towards saving the users time, either by a coarse view of the image before it's fully downloaded or reducing the size of the image. If you want to see how long an image will take to download at various baud rates, pick Image->Get Info. The dialog box like the one shown below will be displayed:

The download time will be displayed (based on the saved file size, as we explained earlier), along with a pop-up menu you can use to change the baud rate used to calculate the download time at various speeds (the initial setting is 28,800 baud, the most popular modem speed in use today). Note that you must save the image before you can get an accurate reading on the download time.

To see what this image will look like in your browser, you can do one of two things:

1. Drag and drop the "cyberfrog.gif" document icon onto your Web Browser's application icon (most Web Browsers will open and display GIF or JPEG images dropped onto their application icon)

2. Pick File->Preview in Browser. The image will be displayed in your Web Browser.

NOTE: You may have to select the Web Browser to be used in wwwART's Preferences dialog. Pick Edit->Preferences. When the Preferences dialog box appears, click the Select Browser button. A standard Macintosh open dialog box will appear - use it to choose your favorite Web Browser. wwwART will use that browser in the future whenever you pick File->Preview in Browser. If you wish to change the Web Browser in the future, just repeat the above stemps to select a new browser.

TIP: Some browsers, such as Netscape Navigator, have preference settings that let you set the default background color or pattern so you can see what your image will look like on whatever color or pattern you want to use.

ADDING IMAGES TO A WEB PAGE

Now that you've saved it, you can use the "cyberfrog.gif" image on a web page. Most "WYSIWYG" Web Page creation programs such as PageMill, Claris Home Page, etc, allow you to drag and drop a document icon straight into their opened window.

Most Web Page creation programs also allow you to drag a selected picture directly from the WINDOW of some other program that support drag-and-drop. wwwART is such a program. Here's how you drag and drop an image from a wwwART window into a Web page creation program's window.

1. Open your Web Page creation program and the web page you want to add an image to.

2. Open wwwART and the document containing the image you want to add to the web page.

3. Select some or all of your image using the selection tools in the Tool palette. If you want to do the whole picture, pick Selection->Select All from the menu bar.

4. Select the Hand tool or one of the selection tools and then click in the selected part of the wwwART document. Keep the mouse button held down and drag the image out of the wwwART window over on top of the window containing the Web Page you wish to place the image in.

TIP : When you drag and drop an image from a wwwART window or a desktop clipping into a Web Page creation program, a COPY is made of the image, and the new image is given a name such as "image1.gif", "image2.gif", etc. Your original document is typically not used by the web page creation program. If you want to use the original .gif or .jpg document name on the web site, then you'll typically need to place your ".gif" or ".jpg" document in the standard folder used by the web site to store images and then drag and drop the .gif or .jpg document icon from the Finder window into the web page creation program's window. Consult your web page creation program's documentation for details.

NOTE: If you drag a GIF image that was saved in transparent form with wwwART and then drag-and-drop part of the image from the wwwART window into your web page creation program's window, the web page creation program will not know that you're dragging an image from a transparent GIF. You'll have to use the web page creation program's tools to make the dragged image's background transparent again.


Other things you can do with drag-and-drop

You can drag images from one wwwART window to another.

You can drag images from a wwwART window to another program that supports drag-and-drop, such as the Scrapbook or Jigsaw Puzzle desk accessory, the Desktop Patterns Control Panel, etc. You can also drag images from those programs INTO a wwwART window.

You can drag images from the wwwART window to the desktop to create a desktop clipping file, or vice versa.

This tutorial continues in Part 2, which discusses how to use wwwART to create Image Maps.

Go to Chapter: | Previous | Next |

| Contents | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Tutorial |

Go to MicroFrontier Web Site